<script setup lang="jsx">
import {inject, onMounted, ref, watch} from "vue";
import DataGrid from "@cps/DataGrid/DataGrid.vue";
import {Message} from "@arco-design/web-vue";
import parcel from "@/api/document/parcel.js";

const visible = defineModel()
const getRecord = inject('getRecord')
const record = inject('record')
const userData = ref([])
const columns = ref([
  {title: '运单号/箱号', data: 'number', readOnly: true},
  {title: '扩展箱号', data: 'ext_number'},
])
const form = ref({
  n:'6',
  fba: ''
})

watch(()=>form,()=>{
  let fba = form.value.fba
  if(fba.length === 0){
    return
  }
  fba = fba.toUpperCase()
  // 生成 FBA 箱号
  userData.value.map((item,index)=>{
    if(item.number){
      item.ext_number = fba + 'U' + (index+1).toString().padStart(form.value.n,'0')
    }
  })
},{deep:true})

onMounted(()=>{
  userData.value.length = 0
  userData.value.push(...JSON.parse(JSON.stringify(record.value.parcel)))
})
const submit = async () => {
  let data = userData.value.filter(i=>i.id).map(i=>{
    return {
      id:i.id,
      ext_number:i.ext_number
    }
  })
  let res = await parcel.fba(data)
  if(!res.success){
    Message.error(res.message)
    return false;
  }
  Message.info(res.message)
  visible.value = false
  getRecord()
  return true;
}
const cancel = ()=>{
  visible.value = false
  form.value = {
    n:'6',
    fba: ''
  }
}
</script>

<template>
  <a-drawer
      :visible="visible"
      title="FBA"
      width="70%"
      :destroyOnClose="true"
      :getContainer="false"
      :style="{position: 'absolute'}"
      @cancel="cancel"
      @ok="submit"
  >
    <a-space>
      <a-form-item label="FBA号">
        <a-input v-model="form.fba" />
      </a-form-item>
      <a-form-item label="箱号位数">
        <a-radio-group type="button" v-model="form.n">
          <a-radio value="3">3</a-radio>
          <a-radio value="6">6</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-space>
    <data-grid :columns="columns"  :minSpareRows="0" v-model="userData"/>
  </a-drawer>
</template>

<style scoped>

</style>